<template>
	<view style="background-color: #F8F8F8;">
		<view class="nav-back">
			<top-heigth></top-heigth>
			<!-- 搜索框 -->
			<view v-cloak id="app" class="search-head">
				<view class="uv-nav-slot"  @click="goback()">
					<image src="/static/image/go.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
				</view>
				<image src="/static/image/search.png" class="search-icon"></image>
				<input class="uni-input search-inp" confirm-type="search" placeholder="请输入技师姓名" @input="onKeyUserNameInput"/>
				<text class="search-text" @click="toSearchPage()">搜索</text>
			</view>
		</view>	
		
		<view class="content-box">
			<view style="margin-bottom: 24rpx;"></view>
			<view v-if="list.length == 0" class="kong-box">
				<uv-empty mode="" text="暂无技师" icon="/static/image/kong-js.png"></uv-empty>
			</view>
			<view class="list-box" v-for="(item, index) in list" @click="goDetail(item.id)">
				<view class="">
					<!-- 0 新人 1优秀 -->
					<uv-icon v-if="item.isRecommend == 0" size="22" name="/static/image/t-vip2.png" class="m-b8 t-vip"></uv-icon>
					<uv-icon v-if="item.isRecommend == 1" size="22" name="/static/image/t-vip1.png" class="m-b8 t-vip"></uv-icon>
					<view class="list-head">
						<view class="img-box">
							<image class="image" :src="item.staffCover" mode="widthFix"></image>
						</view>
						<view v-if="item.isRecommend == 0" class="title title-blue">新人</view>
						<view v-if="item.isRecommend == 1" class="title">优秀技师</view>
					</view>
				</view>
				<view style="width:calc(100% - 184rpx)">
					<view class="list-center-top">
						<view class="list-center">
							<h1 class="list-center-h1">{{item.staffName}} <span v-if="isShenhe" style="color: brown;">（已实名）</span></h1>
							<view class="time">
								<view class="time-b-red">最早可约</view>
								<view class="time-f-red">{{item.timeWork}}</view>
							</view>
						</view>
						
						<view>
							<view v-if="item.isCollect == 0" @click.stop="startBox(item.id, item.isCollect)" class="icon-font m-b8">
								<uv-icon size="16" name="/static/image/start.png" style="margin-right: 8rpx;"></uv-icon>
								<view class="shop">收藏</view>
							</view>
							<view v-if="item.isCollect == 1" @click.stop="startBox(item.id, item.isCollect,item.tAppUserCollectVo.id,item.tAppUserCollectVo.version)" class="icon-font m-b8">
								<uv-icon size="16" name="/static/image/start-choose.png" style="margin-right: 8rpx;"></uv-icon>
								<view class="shop">收藏</view>
							</view>
							<view class="icon-font m-b8">
								<uv-icon size="16" name="/static/image/t-address.png" style="margin-right: 8rpx;"></uv-icon>
								<view class="shop">{{item.distance}}km</view>
							</view>
						</view>
					</view>
					
					<view class="list-bottom-box">
						<view class="list-bottom">
							<view class="font" style="margin-bottom: 8rpx;">
								<span class="list-span">{{item.score}}分</span>服务单数 {{item.orderCount}}
							</view>
							<view @click.stop="goBusinessDetail(detail.tAppSupplierVo.id)" class="font font-flex">
								<uv-icon size="16" name="/static/image/t-shop.png" style="margin-right: 8rpx;"></uv-icon>
								<view class="shop">{{item.tAppSupplierVo ? item.tAppSupplierVo.supplierName : '无'}}</view>
							</view>
						</view>
						<view class="but-blue t-but">立即预约</view>
					</view>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	
	import TopHeigth from '@/components/TopHeigth.vue'
	import { checkLogin } from "@/util/checkLogin.js"
	export default {
		data() {
			return {
				isShenhe: 1,
				list:[],
				location: uni.getStorageSync('location'),
				userInfo: uni.getStorageSync('userInfo'),
				staffName:"",//技师名称 str
			}
		},
		components: { TopHeigth },
		onLoad() {
			// this.listBox()
		},
		methods: {
			startBox:function(id,type,listId,version){
				checkLogin(() => {
					if(type == 0){ // 收藏
						console.log("收藏")
						uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/insertTAppUserCollect',{
							appUserId:this.userInfo.id,
							collectType:1, //1技师 2服务
							staffId:id,
							//staffServiceId:"" //技师服务id
						}).then((res) => {
							uni.showToast({
								icon: "none",
								title: res.message
							})
							if(res.code == 200){
								console.log("chengg")
								this.listBox()
							}
						})
					} else{ //取消收藏
						uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/deleteTAppUserCollect',{
							id:listId,
							version:version,
							isOn:1,
							//staffServiceId:"" //技师服务id
						}).then((res) => {
							uni.showToast({
								icon: "none",
								title: res.message
							})
							if(res.code == 200){
								this.listBox()
							}
						})
					} 
					
				})
			},
			deleteBox:function(listId){
				checkLogin(() => {
					
				})
			},
			toSearchPage(){//去搜索
				this.listBox()
			},
			listBox(){
				uni.$u.http.post('/api/shop/v1_0/linyue/version',{}).then((res) => {
					this.isShenhe = !res.data
					
					uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/queryTAppStaff',{
						id: this.isShenhe ? 1 : null,
						isAuthentication:1,
						isOn:1,
						checkStatus:1,
						staffName:this.staffName ? this.staffName : null,
						lat: this.location ? this.location.latitude : null,
						lng: this.location ? this.location.longitude : null,
					}).then((res) => {
						this.list = res.aaData
					})
				})
				
			},
			//去确认订单
			goOrder(id){
				uni.navigateTo({
					url:"/pages/order/confirmOrder?id="+ id
				})
			},
			goDetail(id){
				uni.navigateTo({
					url: "/pages/technician/detail?id="+id
				})
			},
			goback(){
				uni.navigateBack()
			},
			   onKeyUserNameInput: function(event) {  
			                this.staffName = event.target.value  
			            },  
		}
	}
</script>

<style lang="scss">
	
@mixin flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: $direction;
}
.search-icon{
	width: 17px;
	height: 17px;
	position: absolute;
	top: 20px;
	left: 54px;
	
}
.search-head{
	height: 40px;
	position: relative;
	padding: 10px;
	display: flex;
}
.search-inp{
	height: 36px;
	background: #FFFFFF;
	border-radius: 19px;
	border: 1px solid #F7F7F7;
	padding-left: 30px;
	flex: 1;
}
.search-text{
	font-weight: 500;
	font-size: 15px;
	color: #27A0FF;
	line-height: 40px;
	text-align: center;
	font-style: normal;
	width: 50px;
}
.uv-nav-slot {
	@include flex;
	align-items: center;
	justify-content: space-between;
	border-width: 0.5px;
	border-radius: 100px;
	border-color: #dadbde;
	padding: 3px 7px;
	opacity: 0.8;
}

.technician-top{
	@include flex;
	align-items: center;
	justify-content: flex-start;
	padding:32rpx;
	background-color: #fff;
}



.list-box{
	position: relative;
	border-radius:24rpx;
	padding: 32rpx 24rpx;
	display: flex;
	justify-content: flex-start;
	margin-bottom: 24rpx;
	background-color: #fff;
	margin-bottom:24rpx;
	
}
.list-head{
	height:160rpx;
	width: 160rpx;
	background: #f8f8f8;
	margin-right: 24rpx;
	border-radius: 160rpx;
	position: relative;
	font-weight: bold;
	.img-box{
		height:160rpx;
		width: 160rpx;
		border-radius: 160rpx;
		overflow: hidden;
		image{
			width: 160rpx;
			height: 160rpx;
		}
	}
	
	.title{
		position: absolute;
		bottom:-8rpx;
		left: 80rpx;
		width: 104rpx;
		margin-left: -51rpx;
		height: 32rpx;
		color: #75391E;
		font-size: 20rpx;
		border-radius: 32rpx;
		padding: 2rpx 6rpx;
		text-align: center;
		background: linear-gradient(180deg, #FFF0D2 0%, #FFC874 100%);
	}
	.title-blue{
		color: #1665AA;
		background: linear-gradient(180deg, #BEF4FF 0%, #30D2FF 100%);
	}
}
.t-vip{
		position: absolute;
		top: 22rpx;
	}

.list-center{
	/* width: calc(100% - 344rpx); */
	margin-right: 24rpx;
	h1{
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 8rpx;
	}
	.time{
		display: flex;
		justify-content: flex-start;
		font-size: 22rpx;
		margin-bottom: 8rpx;
		.time-b-red{
			height: 34rpx;
			line-height: 34rpx;
			color: #fff;
			background: #FF1818;
			border-radius: 4rpx;
			border: 2rpx solid #FF1818;
			z-index: 9;
			padding: 0 8rpx;
		}
		.time-f-red{
			height: 34rpx;
			line-height: 34rpx;
			color: #FF1818;
			background: rgba(255,0,0,0.08);
			border: 2rpx solid rgba(255,24,24,0.3);
			border-left: 0;
			border-radius: 0 4rpx 4rpx 0;
			margin-left: -2rpx;
			padding: 0 8rpx;
		}
	}
	
	
}
.list-bottom-box{
	display: flex;
	justify-content: space-between;
}
.list-bottom{
	width: calc(100% - 200rpx);
	.font{
		color: #999999;
		font-size: 24rpx;
		span{
			color:#FFA23E;
			margin-right: 8rpx;
			font-weight: bold;
		}
	}
	.font-flex{
		display: flex;
		justify-content: flex-start;
		.shop{
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}
}
.list-center-top{
	width: 100%;
	display: flex;
	justify-content: space-between;
}


.icon-font{
	display: flex;
	justify-content: flex-end;
	color: #999999;
	font-size: 24rpx;
}



</style>
